<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<link rel="stylesheet" href="style.css">
<body>
    <div id="app">
        <div v-if="barbecue.length">
            <table>
                <thead>
                    <tr>
                        <th>Id</th>
                        <th>菜品</th>
                        <th>饮料</th>
                        <th>价格</th>
                        <th>数量</th>
                        <th>操作</th>
                    </tr>
                </thead>
            <table>
            <tr v-for="(item,index) in barbecue">
                <td>{{item.id}}</td>
                <td>
                    <img :src="item.images" alt="">
                    {{item.name}}
                </td>
                <td>
                    <select>
                        <option v-for="drink in softDrink">
                            {{drink}}
                        </option>
                    </select>
                </td>
                <td>{{item.price | showPrice}}</td>
                <td>
                    <button @click="decrement(index)":disabled="item.count <=1">-</button>
                    {{item.count}}
                    <button @click="increment(index)">+</button>
                </td>
                <td><button @click="removeHandle(index)">移除</button></td>
            </tr>
            </tbody>
        </table>
        <h2>总价格：{{tolaprice | showPrice}}</h2>
        </div>
        <h2 v-else>购物车为空</h2>
    </div>
    <script src="main.js"></script>
</body>
</html>